<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="../layui/css/layui.css" />
    </head>
    <body>
        
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
              <div class="layui-input-inline" style="width: 80px">
                <button id="addBtn" type="button" class="layui-btn">增加</button>
              </div>
              <div class="layui-input-inline" style="width: 80px">
                <select name="type">
                  <option value="name">姓名</option>
                  <option value="gender">性别</option>
                  <option value="age">年龄</option>
                </select>
              </div>
              <div class="layui-input-inline">
                <input
                  type="text"
                  name="value"
                  placeholder="请输入搜索内容"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
              <div class="layui-input-inline">
                <button type="button" id="searchBtn" class="layui-btn">
                  <i class="layui-icon layui-icon-search"></i>
                </button>
              </div>
            </div>
          </form>
        <table id="studentTable" lay-filter="studentTable"></table>
        <script type="text/html" id="tableTool">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                >删除</a
            >
        </script>
        <script src="../layui/layui.js"></script>
        <script src="../js/mock-min.js"></script>
        <script src="../lesson13/data.js"></script>
        <script src="../lesson13/ajax.js"></script>
        <script>
            layui.define(function () {
                let { $, layer, form, table } = layui;
                table.render({
                    elem: "#studentTable",
                    url: "/findStudents", //数据接口
                    page: false, //开启分页
                    method: "post",
                    contentType: "application/json",
                    cols: [
                        [
                            //表头

                            { field: "name", title: "姓名" },
                            {
                                field: "gender",
                                title: "性别",
                            },
                            { field: "age", title: "年龄" },
                            {
                                fixed: "right",
                                title: "操作",
                                width: 150,
                                align: "center",
                                toolbar: "#tableTool",
                            },
                        ],
                    ],
                });

                $("#addBtn").click(function () {
                    layer.open({
                        type: 1,
                        title: "增加学生",
                        area: "500px",
                        btn: ["确认", "取消"],
                        id: "layer1",
                        success: function (layero, index) {
                            form.render();
                        },
                        content: `
                        <form style="padding:20px" class="layui-form" lay-filter="addForm" action="#">
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="name"
                                        lay-verify="required"
                                        placeholder="请输入姓名"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="age"
                                        lay-verify="required"
                                        placeholder="请输入年龄"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="gender" value="男" title="男">
                                    <input type="radio" name="gender" value="女" title="女">
                                </div>
                            </div>

                            
                        </form>
                        `,
                        yes: function (index) {
                            $.ajax({
                                type: "post",
                                url: "/addStudent",
                                data: form.val("addForm"),
                                processData: false,
                                success() {
                                    layer.close(index);
                                    table.reload("studentTable", {
                                        where:{}
                                    });
                                },
                            });
                        },
                    });
                });

                table.on("tool(studentTable)", function (obj) {
                    if (obj.event == "del") {
                        layer.confirm("是否确定删除?", function (index) {
                            $.ajax({
                                type: "post",
                                url: "/delStudent",
                                processData: false,
                                data: {
                                    id: obj.data.id,
                                },
                                success() {
                                    layer.close(index);
                                    table.reload("studentTable");
                                },
                            });
                        });
                    } else if (obj.event == "edit") {
                        layer.open({
                            type: 1,
                            title: "修改学生",
                            area: "500px",
                            btn: ["确认", "取消"],
                            id: "layer2",
                            success: function (layero, index) {
                                $.ajax({
                                    type:"post",
                                    url:"/findById",
                                    processData:false,
                                    dataType:"json",
                                    data:{
                                        id:obj.data.id
                                    },
                                    success(res){
                                        form.render();
                                        form.val("updateForm",res.student);
                                    }
                                });
                                
                            },
                            content: `
                        <form style="padding:20px" class="layui-form" lay-filter="updateForm" action="#">
                            <input type="hidden" name="id">
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="name"
                                        lay-verify="required"
                                        placeholder="请输入姓名"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="age"
                                        lay-verify="required"
                                        placeholder="请输入年龄"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="gender" value="男" title="男">
                                    <input type="radio" name="gender" value="女" title="女">
                                </div>
                            </div>

                            
                        </form>
                        `,
                            yes: function (index) {
                                $.ajax({
                                    type: "post",
                                    url: "/updateStudent",
                                    data: form.val("updateForm"),
                                    processData: false,
                                    success() {
                                        layer.close(index);
                                        table.reload("studentTable", {});
                                    },
                                });
                            },
                        });
                    }
                });
                $("#searchBtn").click(function(){
                    console.log(form.val("searchForm"));
                    table.reload("studentTable",{
                        where:form.val("searchForm")
                    });
                });
            });
        </script>
    </body>
</html>
